<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta content="telephone=no" name="format-detection" />
  <title>Title</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="/res/plugin/materialize/css/materialize.min.css">


</head>
<body>
<div class="row">
  <div class="col s4">
    <a href="/res/html/bill/statistics.html">统计,日期查询</a>
  </div>
</div>
<div class="row">
  <form class="col s12">

    <div class="row">
      <div class="input-field col s12">
        <input id="money" type="number" class="" placeholder="消费金额">
        <label for="money">金额</label>
      </div>
    </div>
    <div class="row">
      <div class="chip-wrapper">
        <div class="chip">5</div>
        <div class="chip">10</div>
        <div class="chip">15</div>
        <div class="chip">25</div>
        <div class="chip">30</div>
        <div class="chip">35</div>
        <div class="chip">40</div>
        <div class="chip">45</div>
        <div class="chip">50</div>
      </div>
    </div>
    <div class="input-field col s12">
      <select id="billType" name="billType">
        <option value="" disabled selected>请选择</option>
        <option value="早餐" data-money="5">早餐</option>
        <option value="中餐" data-money="13">中餐</option>
        <option value="烟" data-money="28">烟</option>
        <option value="晚餐" data-money="16">晚餐</option>
        <option value="咖啡" data-money="32">咖啡</option>
        <option value="养猫" data-money="100">养猫</option>
        <option value="其他">其他</option>
      </select>
      <label>消费类型</label>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <textarea id="remarks" class="materialize-textarea"></textarea>
        <label for="remarks">备注</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="day" name="day" type="date" class="datepicker" value="">
        <label for="day">日期</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <button type="button" id="submit" class="waves-effect waves-light btn">提交</button>
      </div>
    </div>
  </form>
</div>
<hr>
<div class="row">
  <table class="bordered striped centered">
    <thead>
    <tr>
      <th data-field="id">类别</th>
      <th data-field="name">金额</th>
      <th data-field="price">日期</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
  </table>

</div>
<script src="/res/plugin/jquery/jquery-3.2.1.min.js"></script>
<script src="/res/plugin/materialize/js/materialize.min.js"></script>
<script src="/res/plugin/layer/layer.js"></script>
<script>
  $(function () {
    getAll();
    var $money = $('#money');
    var $billType = $('#billType');
    var $day = $('#day');
    $day.val(getDay());
    $day.pickadate({
      monthsFull: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      weekdaysFull: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      weekdaysShort: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      today: '今天',
      clear: '清空',
      'format': 'yyyy-mm-dd',
      firstDay: 0, //星期一作为第一天
      selectMonths: true, // Creates a dropdown to control month
      selectYears: 15 // Creates a dropdown of 15 years to control year
    });
    $billType.material_select();
    $('.chip-wrapper').on('click', '.chip', function (e, chip) {
      $('#money').val($(this).text());
    });
    $billType.on('change', function (e) {
      if (!$money.val()) {
        let typeMoney = $(this).children('option:selected').attr('data-money');
        $money.val(typeMoney);
      }
    });
    $('#submit').on('click', function (e) {
      var money = Number($money.val());
      if (!money > 0) {
        layer.alert('请输入金额');
        return false;
      }
      var billType = $billType.val();
      if (!billType) {
        layer.alert('请选择类别');
        return false;
      }
      let remarks = $('#remarks').val();
      if (billType === '其他' && !remarks) {
        layer.alert('类别为其他时,请输入备注');
        return false;
      }
      let day = $day.val();
      if (!day) {
        layer.alert('请选择日期');
        return false;
      }
      var index = layer.load();
      $.post('/consume/bill', {
        'money': money,
        'billType': billType,
        'remarks': remarks,
        'day': day,
      }, function (json) {
        layer.close(index);
        if (json.result === 1) {
          layer.alert('新增成功');
          $('#money').val('');
          $('#remarks').val('');
          $billType.material_select();
          getAll();
        } else {
          layer.alert(json.msg);
        }
      });


    })
  });

  function getAll() {
    $.get('/consume/bill/getAll', function (json) {
      if (json.result === 1) {
        var text = '';
        json.data.forEach(function (item, index) {
          text += `<tr><td>${item.type}</td><td>${item.money}</td><td>${item.day}</td></tr>`;
        })
        $('#tbody').html(text);
      } else {
        layer.alert(json.msg);
      }
    });
  }

  function getDay() {
    var date = new Date();
    var text = date.getFullYear() + '-';
    var month = date.getMonth() + 1;
    if (month < 10) {
      text += '0' + month + '-';
    } else {
      text += month + '-';
    }
    var day = date.getDate();
    if (day < 10) {
      text += '0' + day;
    } else {
      text += day;
    }
    return text;
  }
</script>
</body>
</html>